import React, { PureComponent, Fragment } from 'react';
import {
  Form,
  Input,
  Select,
  Modal,
  Radio,
} from 'antd';


const FormItem = Form.Item;
const { TextArea } = Input;

const RadioGroup = Radio.Group;

//更新和新增用户信息   modalVisible

@Form.create()
class UpdateForm extends PureComponent {
  constructor(props) {
    super(props);


    this.formLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 13 },
    };
  }

  // 表单
  renderContent = () => {
    const { form, values, couponList } = this.props;
    return [
      <FormItem key="type" {...this.formLayout} label="奖励类型">
        {form.getFieldDecorator('type', {
          rules: [{ required: true, message: '请选择奖励类型！' }],
          initialValue: values.type,
        })(
          <RadioGroup>
            <Radio value={1}>红包</Radio>
            <Radio value={2}>优惠券</Radio>
          </RadioGroup>,
        )}
      </FormItem>,
      form.getFieldValue('type') === 1 ?
        <FormItem key="amount" {...this.formLayout} label="红包金额">
          {form.getFieldDecorator('amount', {
            rules: [{ required: true, message: '请输入红包金额！' }],
          })(<Input  placeholder="请输入红包金额"/>)}
        </FormItem> : '',
      form.getFieldValue('type') === 2 ?
        <FormItem key="couponNo" {...this.formLayout} label="优惠券">
          {form.getFieldDecorator('couponNo', {
            rules: [{ required: true, message: '请选择优惠券！' }],
          })(
            <Select placeholder='请选择优惠券' style={{ width: '100%' }}>
              {
                couponList.map((item) => {
                  return <Select.Option value={item.couponNo} key={item.couponNo}>{item.couponName}</Select.Option>;

                })
              }
            </Select>,
          )}
        </FormItem> : '',
      <FormItem key="remark" {...this.formLayout} label="发放原因">
        {form.getFieldDecorator('remark', {
          rules: [{ required: true, message: '请输入发放原因！' }],
        })(
          <TextArea rows={4}/>,
        )}
      </FormItem>,
    ];
  };

  //弹窗
  render() {
    const { handleModalVisible, modalVisible } = this.props;

    //完成
    const handleNext = () => {
      const { form, values, handleAdd } = this.props;
      form.validateFields((err, fieldsValue) => {
        if (err) return;
        const formVals = { ...values, ...fieldsValue };
        formVals.amount = Number(formVals.amount);
        handleAdd(formVals);
      });
    };
    return (
      <Modal
        width={640}
        bodyStyle={{ padding: '32px 40px 48px' }}
        destroyOnClose
        title={modalVisible ? '发放奖励' : ''}
        visible={modalVisible}
        onOk={handleNext}
        onCancel={() => handleModalVisible(false, [])}
      >
        {this.renderContent()}
      </Modal>
    );
  }
}

export default UpdateForm;
